Improve look and printability of new web ui

Author: jart

llamafile/server/www/chatbot.css

@@ -4,6 +4,12 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  height: 100%;
+  overflow-y: auto;
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   line-height: 1.6;
@@ -17,14 +23,13 @@ p {
 }
 
 .chat-container {
-  max-width: 800px;
+  max-width: 960px;
   margin: 2rem auto;
   background: white;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 4rem);
 }
 
 .chat-header {
@@ -248,38 +253,14 @@ ul li:first-child {
   display: block;
 }
 
-.typing-indicator {
-  display: none;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem;
-  color: #6c757d;
-}
-
-.typing-indicator span {
-  width: 4px;
-  height: 4px;
-  background: #6c757d;
-  border-radius: 50%;
-  display: inline-block;
-  animation: typing 1s infinite ease-in-out;
-}
-
-.typing-indicator span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.typing-indicator span:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes typing {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-4px); }
-}
-
 @media print {
 
+  html,
+  body {
+    height: auto !important;
+    overflow-y: visible;
+  }
+
   .noprint {
     display: none;
   }
@@ -290,10 +271,14 @@ ul li:first-child {
 
   .chat-container {
     box-shadow: none;
+    height: auto !important;
+    max-width: none !important;
+    overflow: visible !important;
   }
 
   .chat-header {
     border: none !important;
+    page-break-inside: avoid;
   }
 
   .chat-messages {

llamafile/server/www/chatbot.js

@@ -18,7 +18,6 @@ const API_KEY = "your-api-key-here";
 const chatMessages = document.getElementById("chat-messages");
 const chatInput = document.getElementById("chat-input");
 const sendButton = document.getElementById("send-button");
-const typingIndicator = document.getElementById("typing-indicator");
 const stopButton = document.getElementById("stop-button");
 
 let abortController = null;
@@ -44,11 +43,7 @@ function createMessageElement(content, role) {
 }
 
 function scrollToBottom() {
-  chatMessages.scrollTop = chatMessages.scrollHeight;
-}
-
-function setTypingIndicatorVisibility(visible) {
-  typingIndicator.style.display = visible ? "flex" : "none";
+  chatInput.scrollIntoView({behavior: "instant"});
 }
 
 function onChatInput() {
@@ -57,7 +52,6 @@ function onChatInput() {
 }
 
 function cleanupAfterMessage() {
-  setTypingIndicatorVisibility(false);
   chatMessages.scrollTop = chatMessages.scrollHeight;
   chatInput.disabled = false;
   sendButton.style.display = "inline-block";
@@ -144,9 +138,6 @@ async function sendMessage() {
   // update chat history
   chatHistory.push({ role: "user", content: message });
 
-  // show typing indicator
-  setTypingIndicatorVisibility(true);
-
   try {
     const response = await fetch(API_ENDPOINT, {
       method: "POST",
@@ -190,6 +181,7 @@ chatMessages.innerHTML = "";
 for (let i = 0; i < chatHistory.length; i++) {
   chatMessages.appendChild(createMessageElement(chatHistory[i].content,
                                                 chatHistory[i].role));
+  scrollToBottom();
 }
 
 // setup events

llamafile/server/www/highlight_c.js

@@ -2028,7 +2028,7 @@ class HighlightC extends Highlighter {
           this.push('span', 'builtin');
           this.append(this.word);
           this.pop();
-        } else if (this.constants && this.constants(this.word)) {
+        } else if (this.constants && this.constants.has(this.word)) {
           this.push('span', 'constant');
           this.append(this.word);
           this.pop();

llamafile/server/www/highlight_ruby.js

@@ -682,16 +682,19 @@ class HighlightRuby extends Highlighter {
         break;
 
       case HighlightRuby.PERCENT_STRING:
-        this.append(c);
         if (c == this.opener && this.opener != this.closer) {
+          this.append(c);
           ++this.level;
         } else if (c == '#') {
           this.state = HighlightRuby.PERCENT_HASH;
         } else if (c == this.closer) {
+          this.append(c);
           if (!--this.level) {
             this.pop();
             this.state = HighlightRuby.NORMAL;
           }
+        } else {
+          this.append(c);
         }
         break;
 

llamafile/server/www/index.html

@@ -15,11 +15,6 @@ <h1><img src="chatbot.png" alt="[logo]" width="64" height="64"> llamafile</h1>
       Loading...
     </div>
   </div>
-  <div class="typing-indicator noprint" id="typing-indicator">
-    <span></span>
-    <span></span>
-    <span></span>
-  </div>
   <div class="chat-input-container noprint">
     <textarea class="chat-input" id="chat-input" placeholder="Type your message..." rows="1" autocomplete="off"></textarea>
     <button class="send-button" id="send-button">Send</button>

llamafile/server/www/test/test.md

@@ -62,11 +62,15 @@ int main() {
    years old." << std::endl;`:** This line prints a message to the
    console. Let's break it down:
    - `std::cout` is the standard output stream object.
-   - `<<` is the insertion operator, used to send data to the output stream.
-   - `"Hello, world! My name is AI, and I am "` is a string literal that will be printed as is.
-   - `age` is the variable we declared earlier. Its value (25) will be inserted into the output stream.
+   - `<<` is the insertion operator, used to send data to the output
+     stream.
+   - `"Hello, world! My name is AI, and I am "` is a string literal that
+     will be printed as is.
+   - `age` is the variable we declared earlier. Its value (25) will be
+     inserted into the output stream.
    - `" years old."` is another string literal.
-   - `std::endl` inserts a newline character, moving the cursor to the next line for any subsequent output.
+   - `std::endl` inserts a newline character, moving the cursor to the
+     next line for any subsequent output.
 
 5. **`return 0;`:** This line indicates that the program executed
    successfully. Returning 0 from the `main` function is a convention in
@@ -161,3 +165,53 @@ part of the code.
 This program is a simple example of how to use variables, input/output
 operations, conditional statements, and loops in FORTRAN66. It
 demonstrates basic input/output operations and error handling.
+
+## Rubby
+
+```ruby
+# comment
+42
+"String with #{ :interpolation }"
+/regex$/
+$/
+[?😀, ?\ , ?', ?(] ?'a':'b'
+"%d %d %d"%[1,2,3]
+% 5 #
+
+/
+$$#$/
+/omix
+
+puts <<HERE<<<<THERE
+foo 42
+HERE
+bla 43
+THERE
+
+puts "This is #{<<HERE.strip} evil"
+incredibly
+HERE
+
+def `
+  `hello` / /regex/
+end
+
+"hi #$" there" a
+"hi #$abc there" a
+"hi #{hi} there" a
+/hi #$" there/ a
+/hi #$abc there/ a
+/hi #{hi} there/ a
+_=;"#$q"
+
+# Examples:
+%q(Don't worry)            # => "Don't worry"
+%Q(Today is #{Date.today}) # => "Today is 2024-11-08"
+%r{^/path/to/\w+}          # => /^\/path\/to\/\w+/
+%s(my_symbol)              # => :my_symbol
+%w(foo bar baz)            # => ["foo", "bar", "baz"]
+%W(foo #{1+1} baz)         # => ["foo", "2", "baz"]
+%x(ls -l)                  # Executes `ls -l` and returns output
+%i(foo bar baz)            # => [:foo, :bar, :baz]
+%I(foo#{1+1} bar baz)      # => [:foo2, :bar, :baz]
+```